<template>
  <div class="wholesale-add">
    <div class="control">
      <h1>创建批发采购订单</h1>
    </div>
    <div class="block">
      <section>
        <el-steps
          :active="active_index - 1"
          process-status="success"
          finish-status="success"
          align-center
        >
          <el-step title="选择供应商及合同" />
          <el-step title="选择采购产品" />
          <el-step title="填写订单信息" />
        </el-steps>
      </section>
    </div>
    <article v-show="active_index === 1" class="article-box">
      <supplier-and-contract-component
        :supplier-id.sync="form_data.supplier"
        :contract-id.sync="form_data.contract"
        :order-type-id.sync="form_data.ordertype"
        :order-type-d-d-b-m.sync="orderTypeDDBM"
        :is-edit="is_edit"
        :is-first-mount.sync="isFirstMount"
        :bus-model="bus_model"
        :order-type="form_data.ordertype"
        :products="form_data.products"
        @change="onSupplierAndContractChange"
      />
    </article>
    <article
      v-show="active_index === 2"
      class="article-box select-product-corver"
    >
      <div class="block">
        <section>
          <!-- <el-form-renderer
            ref="ruleForm"
            label-width="100px"
            :form="readonly_formdata"
            :content="FIELDS_ORDER_DETAIL"
            inline
            readonly
          /> -->
          <el-row class="prdocut-list-header-detail">
            <el-col :span="12">
              <div>
                供应商：<span>{{ readonly_formdata.supplier }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light" />
              <div>
                原厂：<span>{{ readonly_formdata.contract }}</span>
              </div>
            </el-col>
          </el-row>
        </section>
      </div>
      <purchase-products-list-component
        :products.sync="form_data.products"
        :ddbm="orderTypeDDBM"
        :step-one-form-data="submit_data"
        :product-loading="productLoading"
      />
    </article>
    <article v-show="active_index === 3" class="article-box">
      <carryway-and-address-component
        :carryway-id.sync="form_data.carryway"
        :address-id.sync="form_data.address"
        :pay-way-id.sync="form_data.payway"
        :is-edit="is_edit"
        :all-data="submit_data"
        :active-index="active_index"
        @change-address="onAddressChanged"
      />
      <div class="block">
        <header>
          <h2>备注信息</h2>
        </header>
        <section>
          <el-input
            v-model="form_data.remark"
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            maxlength="200"
            show-word-limit
          />
        </section>
      </div>
      <div class="block form-render">
        <header>
          <h2>附加信息</h2>
        </header>
        <section>
          <el-form-renderer
            ref="expandFormRenderer"
            v-model="form_data.extend"
            class="form-renderer"
            :content="extend_model"
            inline
          />
        </section>
      </div>
    </article>

    <el-dialog title="提交订单" :visible.sync="dialogVisible" width="30%">
      <span>确认是否提交订单？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :disabled="submit_loading"
          :loading="submit_loading"
          @click="onSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script src="./index.js"></script>
<style lang="less" src="./index.less"></style>
